<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/firstint.css">
    <link rel="stylesheet" href="../font_3284096_xdkog32r6d/iconfont.css">
    <link rel="stylesheet" href="../css/donghua.css">
    <link rel="stylesheet" href="../css/shoppingcar.css">
    <link rel="stylesheet" href="../css/goodsContent.css">
</head>

<body>
    <div id="header">
        <div class="header-center">
            <div class="logo">
                <a href="../html/firstint.html"><img src="../img/GIF/gif3.gif" alt="" style="height: 70px;width: 70px;padding-left: 30px;"></a>
            </div>
            <div class="list">
                <ul class="list-all">
                    <li>
                        <a href="goods.html">帽子</a> </li>
                    <li>
                        <a href="goods.html">外套</a> </li>
                    <li>
                        <a href="goods.html">裤子</a>
                    </li>
                    <li>
                        <a href="goods.html">背包</a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" text="搜索">
                <span class="iconfont icon-sousuo_o"></span>
            </div>
            <div class="user">
                <span class="iconfont  icon-201yonghu_yonghu2" style="font-size: 30px;line-height: 70px;"></span>
                <div style="font-size: 20px;line-height: 70px;text-decoration: none;color: black" class="denglu"><a href="../html/login.html" style="color: black;text-decoration: none;">登录/</a></div>
                <div style="font-size: 20px;line-height: 70px;text-decoration: none;color: black" class="zhuce"> <a href="../html/create.html" style="color: black;text-decoration: none;">注册</a></div>
            </div>
            <div class="shoppingcar">
                <span class="iconfont icon-gouwuche" style="font-size: 30px;line-height: 70px;"></span>
            </div>
            <div class="GPS-mao">

                <div class="GPS-mao-list">
                    <ul>
                        <a href="">
                            <li>
                                palace普通款
                            </li>
                        </a>
                        <a href="">
                            <li>
                                palace联名款
                            </li>
                        </a>

                        </li>
                    </ul>
                </div>
                <div class="GPS-mao-imgs">
                    <ul>
                        <li>
                            <a href="goods.html"><img src="../img/CLOTHESLIST/HATS/HATS4.webp" alt=""></a>
                        </li>
                        <li>
                            <a href="goods.html"><img src="../img/CLOTHESLIST/HATS/HATS5.webp" alt=""></a>
                        </li>
                        <li>
                            <a href="goods.html"><img src="../img/CLOTHESLIST/HATS/HATS6.webp" alt=""></a>
                        </li>
                        <li>
                            <a href="goods.html"><img src="../img/CLOTHESLIST/HATS/HATS8.webp" alt=""></a>
                        </li>
                    </ul>


                </div>
            </div>
            <div class="GPS-jacket">

                <div class="GPS-jacket-list">
                    <ul>
                        <li>
                            <a href="">普通款 </a>
                        </li>
                        <li>
                            <a href="">联名款</a>
                        </li>
                    </ul>
                </div>
                <div class="GPS-jacket-imgs">
                    <img src="../img/CLOTHESLIST/JACKETS/JACKETS1.webp" alt="">
                    <img src="../img/CLOTHESLIST/JACKETS/JACKETS2.webp" alt="">
                    <img src="../img/CLOTHESLIST/JACKETS/JACKETS3.webp" alt="">
                    <img src="../img/CLOTHESLIST/JACKETS/JACKETS4.webp" alt="">
                </div>
            </div>
            <div class="GPS-pants">
                <div class="GPS-pants-list">
                    <ul>
                        <li>
                            <a href="">普通款</a> </li>
                        <li>
                            <a href="">联名款</a> </li>
                        <li>
                </div>
                <div class="GPS-pants-imgs">
                    <img src="../img/CLOTHESLIST/BOTTOMS/BOTTOMS1.webp" alt="">
                    <img src="../img/CLOTHESLIST/BOTTOMS/BOTTOMS2.webp" alt="">
                    <img src="../img/CLOTHESLIST/BOTTOMS/BOTTOMS3.webp" alt="">
                    <img src="../img/CLOTHESLIST/BOTTOMS/BOTTOMS4.webp" alt="">
                </div>
            </div>
            <div class="GPS-bag">
                <div class="GPS-bag-list">
                    <ul>

                        <li>
                            <a href="">普通款</a> </li>
                        <li>
                            <a href="">联名款</a> </li>
                        <li>
                    </ul>
                </div>
                <div class="GPS-bag-imgs">
                    <img src="../img/CLOTHESLIST/BAGS/BAGS1.webp" alt="">
                    <img src="../img/CLOTHESLIST/BAGS/BAGS3.webp" alt="">
                    <img src="../img/CLOTHESLIST/BAGS/BAGS4.webp" alt="">
                    <img src="../img/CLOTHESLIST/BAGS/BAGS6.webp" alt="">

                </div>
            </div>
        </div>
    </div>
    <div class="shoppingcar-remind">购物车</div>
    <table class="cth1">

        <tbody>
            <!-- <tr>
                <td>
                    <img src="../img/CLOTHESLIST/JACKETS/JACKETS1.webp" alt="" style="width: 100px;height: 100px;">
                </td>
                <td>749 元</td>

                <td> <input type="button" value="-" class="minusnum">
                    <input type="text" size="2" value="1" class="n" style="text-align: center;">
                    <input type="button" value="+" class="addnum">
                </td>
                <td class="xj">749元</td>
                <td><input type="button" value="清除" class="delnum"></td>
            </tr>
            <tr>
                <td>
                    <img src="../img/CLOTHESLIST/JACKETS/JACKETS1.webp" alt="" style="width: 100px;height: 100px;">
                </td>
                <td>749元</td>

                <td> <input type="button" value="-" class="minusnum">
                    <input type="text" size="2" value="1" class="n" style="text-align: center;">
                    <input type="button" value="+" class="addnum">
                </td>
                <td class="xj">749元</td>
                <td><input type="button" value="清除" class="delnum"></td>
            </tr> -->

        </tbody>
        <tfoot id="image3">
            <tr>
                <td id="image4" colspan="5">总计：
                    <span id="money">0</span>元 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="ljgm1"><a class="ljgm2">立即购买</a></button>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="bigdonghua">
        <div class="bigdonghua-center">
            <div class="donghua"></div>
            <div class="donghua"></div>
            <div class="donghua"></div>
            <div class="donghua">
            </div>
        </div>

    </div>
    <div class="foot ">
        <div class="foot-center ">
            <div class="foot-head ">
                <div class="place ">
                    <span class="iconfont icon-zuobiao " style="font-size: 40px;color: red; "></span>
                    <span>查找店铺</span>

                </div>
                <div class="follow ">
                    <span class="iconfont icon-aite " style="font-size: 40px;color: red; "></span>
                    <span>订阅资讯</span>
                </div>
            </div>
            <div class="survice ">
                <div class="survice-one ">
                    <h3>帮助中心</h3>
                    <ul>
                        <li><a href=" "> 购买须知</a></li>
                        <li>
                            <a href=" ">配送及费用</a>
                        </li>
                        <li>
                            <a href=" ">支付方式</a>
                        </li>
                        <li>
                            <a href=" ">退货政策</a>
                        </li>
                    </ul>
                </div>
                <div class="survice-one ">
                    <h3>我的订单</h3>
                    <ul>
                        <li>
                            <a href=" ">订单查询</a>
                        </li>
                        <li>
                            <a href=" ">关于发票</a>
                        </li>
                    </ul>
                </div>
                <div class="survice-one ">
                    <h3>关于NB</h3>
                    <ul>
                        <li>
                            <a href=" ">品牌故事</a>
                        </li>
                        <li>
                            <a href=" ">隐私政策</a>
                        </li>
                        <li>
                            <a href=" ">使用条款</a>
                        </li>
                    </ul>
                </div>
                <div class="survice-one ">
                    <h3>保持联系</h3>
                    <span class="iconfont icon-weixin " style="font-size: 50px; "></span>
                    <span class="iconfont icon-weibo " style="font-size: 50px; "></span>
                    <br><span style="font-size: 12px; ">客服热线：<br>
                        800-820-2887(请使用固话拨打)<br>
                        400-890-2887(请使用手机拨打)<br>
                        电话服务时间：周一~周五 9AM~6PM（节假日除外）<br>
                        在线服务时间：<br>
                        周一 ~ 周日<br>
                        9AM ~ 10PM<br></span>
                </div>
            </div>

        </div>
    </div>

    <div id="myBtn">↑</div>
</body>

</html>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/GPS.js"></script>
<script>
    class Car {
        constructor() {
            this.oTable = document.querySelector('table');
            this.oMoney = document.querySelector('#money')
            this.oTotal = document.querySelector('#total')
            this.bindEvents();
        }
        bindEvents() {
            //事件委托
            this.oTable.onclick = (e) => {
                var ev = e || event;
                //数量减少
                if (ev.target.className == 'minusnum') {
                    this.minNum(ev.target);
                }
                //数量增加
                if (ev.target.className == 'addnum') {
                    this.maxNum(ev.target);
                }
                //删除
                if (ev.target.className == 'delnum') {
                    this.delNum(ev.target);
                }
            }
        }
        minNum(obj) {
            //1.获取值
            var num = obj.nextElementSibling.value;
            //2.操作值
            num--;
            //临界判断
            if (num < 1) {
                alert('不能再减啦！');
                num = 1;
            }
            //3.赋值
            obj.nextElementSibling.value = num;

            //获取到当前物品的单价
            var price = parseInt(obj.parentNode.previousElementSibling.innerHTML);
            //改变小计数量,因为要获取到当前物品的单价与数量，所以需要传参
            this.changeCount(obj, price, num);
            //改变总数量，总数量是把所有数据全部遍历一遍，所以不需要传参当前的数据
            this.changeTotal();
        }
        maxNum(obj) {
            //同上
            var num = obj.previousElementSibling.value;
            num++;
            obj.previousElementSibling.value = num;
            var price = parseInt(obj.parentNode.previousElementSibling.innerHTML);
            //小计改变
            this.changeCount(obj, price, num);
            //总价也在改变
            this.changeTotal();
        }
        delNum(obj) {
                if (confirm('确定要删除吗？')) {
                    obj.parentNode.parentNode.remove();
                    //删除后改变总数
                    this.changeTotal();
                }
            }
            //改变小计
        changeCount(obj, price, num) {
                obj.parentNode.nextElementSibling.innerHTML = price * num + '元';
            }
            //改变总数量与总价
        changeTotal() {
            //因为物品会增添删除，所以每次都需要重新获取
            this.oN = document.querySelectorAll('.n');
            this.oXj = document.querySelectorAll('.xj');
            //总价格
            let sum = 0;
            //总数量
            let sum2 = 0;
            //遍历所有商品的小计
            for (let i = 0; i < this.oXj.length; i++) {
                sum += parseInt(this.oXj[i].innerHTML)
            }
            //赋值
            this.oMoney.innerHTML = sum;
            //遍历所有商品的数量
            for (let j = 0; j < this.oN.length; j++) {
                sum2 += parseInt(this.oN[j].value);
            }
            //赋值
            this.oTotal.innerHTML = sum2;
        }
    }
    new Car();

    function renderCart() {
        $.ajax({
            url: "./PHP/getShoppingCart.php",
            type: 'get',
            data: `vipName=${getCookie('login').split(',')[0]}`,
            dataType: "json",
            success: function(res) {
                // 渲染购物车
                let str = "";
                for (let i = 0; i < res.length; i++) {
                    str += `
                        <tr goodsid="${res[i].goodsId}">
                            <td>
                                <img src="${res[i].goodsImg}" alt="" style="width: 100px;height: 100px;">
                            </td>
                            <td>${res[i].goodsPrice}</td>
                            
                            <td> <input type="button" value="-" class="minusnum">
                                <input class="numIpt" type="text" size="2" value="${res[i].goodsCount}" class="n" style="text-align: center;">
                                <input type="button" value="+" class="addnum">
                            </td>
                            <td class="xj">${res[i].goodsPrice * res[i].goodsCount}</td>
                            <td><input type="button" value="X" class="delnum"></td>
                        </tr>
                    `;
                }
                $('tbody').html(str);
                // 计算总价
                let allnum = 0;
                for (let i = 0; i < $('.xj').length; i++) {
                    allnum += +$('.xj').eq(i).html();
                }
                $('#money').eq(0).html(allnum)
            }
        });
    }
    renderCart()

    // 修改商品数量
    $('.ljgm2').eq(0).on('click', function() {
        let temp = 0;
        for (let i = 0; i < $('tbody tr').length; i++) {
            $.ajax({
                url: "./PHP/updateGoodsCount.php",
                type: 'get',
                data: `vipName=${getCookie('login').split(',')[0]}&goodsId=${$('tbody tr')[i].getAttribute('goodsid')}&goodsCount=${$('.numIpt').eq(i).val()}`,
                dataType: "json",
                success: function(res) {
                    // console.log(res);
                    temp += +res;

                    if (temp == $('tbody tr').length) {
                        alert('添加购物车成功');
                        // location.href = './check .html';
                    }
                }
            });
        }
    })
    if (document.cookie) {
        $('.user').html(getCookie('login').split(',')[0])
    } else {
        $('.user').html("palace俱乐部");
        $('.user').on('click', function() {
            location.href = 'create.html';
        })

    }
</script>